<template>
  <Header title="地址管理"/>
  <van-address-list
  :list="list"
  default-tag-text="默认"
  @add="onAdd"
  @edit="onEdit"
/>

</template>

<script>
import Header from '@/components/Header.vue'
import { onMounted, reactive,toRefs} from 'vue'
import {useStore} from 'vuex'
import {useRouter,useRoute} from 'vue-router'
export default {
components:{Header},
    setup(){
        const store = useStore()
        const router = useRouter()
        const route = useRoute()
        const data = reactive({
            list:[],
        })
        const init = ()=>{
            data.list = store.state.userAddress.map(item=>{
                return {
                    id:item.id,
                    name:item.name,
                    tel:item.tel,
                    address:`${item.province}
                    ${item.city}${item.county}
                    ${item.addressDetail}
                    `,
                    isDefault:item.isDefault
                }
            })
        }
        const onAdd = ()=>{
            router.push({
                path:'/addressedit',
                query:{
                    type:'add'
                }
            })
        }
        const onEdit = (item)=>{
            router.push({
                path:'/addressedit',
                query:{
                    id:item.id,
                    type:'edit'
                }
            })
            console.log(item);
        }
        onMounted(()=>{
            init();
        })
        return {
            ...toRefs(data),
            store,
            onAdd,
            onEdit
        }
    }
}
</script>

<style lang="less" scoped>
/deep/ .van-button--primary {
  background-color: #ffc400;
  border-color: #ffc400;
}
/deep/ .van-tag--round {
  background-color: #ffc400;
}
/deep/ .van-radio__icon {
  display: none;
}
</style>